<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* dd {
            height: 20px;
            transition: height .5s ease;
            overflow: hidden;
        }
        dd.hide {
            height: 0;
        } */
    </style>
</head>
<body>
    <dl>
        <dt>一级标题 1</dt>
        <dd>
            <dl>
                <dt>二级标题 1.1</dt>
                <dd>三级标题 1.1.1</dd>
                <dd>三级标题 1.1.2</dd>
                <dd>三级标题 1.1.3</dd>
                <dd>三级标题 1.1.4</dd>
            </dl>
        </dd>
        <dd>二级标题 1.2</dd>
        <dd>二级标题 1.3</dd>
        <dd>二级标题 1.4</dd>
    </dl>
    <dl>
        <dt>一级标题 2</dt>
        <dd>二级标题 2.1</dd>
        <dd>二级标题 2.2</dd>
        <dd>二级标题 2.3</dd>
        <dd>二级标题 2.4</dd>
    </dl>

    <script>

        const data = [
            {
                label: '一级标题 1',
                children: [
                    {
                        label: '二级标题 1.1',
                        children: [
                            {
                                label: '三级标题 1.1.1',
                            },
                            {
                                label: '三级标题 1.1.2',
                            },
                            {
                                label: '三级标题 1.1.3',
                            },
                        ],
                    },
                    {
                        label: '二级标题 1.2',
                        children: [
                            {
                                label: '三级标题 1.2.1',
                            },
                            {
                                label: '三级标题 1.2.2',
                            },
                        ],
                    },
                    {
                        label: '二级标题 1.3',
                    },
                ],
            },
            {
                label: '一级标题 2',
                children: [
                    {
                        label: '二级标题 2.1',
                    },
                    {
                        label: '二级标题 2.2',
                    },
                    {
                        label: '二级标题 2.3',
                        children: [
                            {
                                label: '三级标题 2.3.1',
                            },
                            {
                                label: '三级标题 2.3.2',
                            },
                        ],
                    },
                ],
            },
            {
                label: '一级标题 3',
                children: [
                    {
                        label: '二级标题 3.1',
                    },
                    {
                        label: '二级标题 3.2',
                    },
                    {
                        label: '二级标题 3.3',
                    },
                    {
                        label: '二级标题 3.4',
                    },
                    {
                        label: '二级标题 3.5',
                    },
                ],
            },
        ];

        // 渲染所有的label
        function createDl (node) {
            const dl = document.createElement('dl');
            const dt = document.createElement('dt');
            dt.innerText = node.label;
            dl.appendChild(dt);
            for (const child of node.children || []) {
                const dd = document.createElement('dd');
                const el = createDl(child);
                dd.appendChild(el);
                dl.appendChild(dd);
            }
            return dl;
        }

        for (const item of data) {
            const el = createDl(item);
            document.body.appendChild(el);
        }

        // 打印所有的label
        function logLabels (data) {
            for (const item of data) {
                console.log(item.label);
                logLabels(item.children || []);
            }
        }

        logLabels(data);

        // // 渲染所有的label
        // const body = document.body;

        // function createNode (node) {
        //     const dl = document.createElement('dl');
        //     const dt = document.createElement('dt');
        //     dt.innerText = node.label;
        //     dl.appendChild(dt);
        //     for (const item of node.children || []) {
        //         const dd = document.createElement('dd');
        //         dd.appendChild(createNode(item));
        //         dl.appendChild(dd);
        //     }
        //     return dl;
        // }

        // for (const item of data) {
        //     body.appendChild(createNode(item));
        // }




    </script>
</body>
</html>